<template>
  <div>
       <el-card class="box-card">
        <template #header>
            <div class="title">图标颜色color、 文字内容name </div>
        </template>
        <div class="trend">
            <div class="mr-2">
              <bs-status name="已完成" color="#67C23A"></bs-status> 
            </div>
            <div class="mr-2">
              <bs-status name="未完成" color="#909399"></bs-status> 
            </div>
            <div>
              <bs-status name="已损坏" color="#F56C6C"></bs-status> 
            </div>
        </div>
    </el-card>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
</script>
<style lang="scss" scoped>
.trend{
    margin-bottom: 30px;
    display: flex;
    align-items: center;  
}
.mr-2{
    margin-right: 20px;
}
</style>